/*
 * @Description: 商品列表页，非管理员账号登录跳转
 * @Author: ZhangHan
 * @Date: 2025-07-21 09:24:31
 * @LastEditTime: 2025-07-23 16:41:16
 * @LastEditors: ZhangHan
 */
import { useNavigate, useLocation } from "react-router-dom";
import { Local } from "@/enums/Local";
import { setLocal } from "@/utils/token";
import { useState, useEffect, useCallback } from "react";
import { Card, Col, Row, Layout, Tag, Empty } from "antd";
import { FloatButton, Avatar, Tooltip, Popconfirm, Button } from "antd";
import { LogoutOutlined } from "@ant-design/icons"; //
import headerImg from "@/assets/images/header.jpg";
import { remove } from "@/store/features/user";
import { useSelector, useDispatch } from "react-redux";
import { ProSelect } from "@/components/ProComponents";
import { getSelectData } from "@/utils/common";
import { SHOP_TYPE } from "@/concacts/valueEnum";
import { dataSource } from "./data";
import { getTypeTag } from "./fun";
import DetailModal from "./components/DetailModal.tsx";
import { useModal } from "@/components/ProComponents/src/ProModal/useModal";
import "./index.less";

const { Header, Sider, Content } = Layout;

function ShopList() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [dataList, setDataList] = useState([]);
  const [open, setOpen] = useState(false); //是否确认退出登录
  const [confirmLoading, setConfirmLoading] = useState(false);
  const userInfo = useSelector((state: any) => state?.user);

  const { modalProps, openModal, closeModal } = useModal({
    footer: null,
  });

  //打开弹框
  const handleDetailModal = (record: any) => {
    console.log("🚀 ~ handleDetailModal ~ record:", record);
    openModal({
      modalData: record,
    });
  };

  const showPopconfirm = () => {
    setOpen(true);
  };

  const handleOk = () => {
    setConfirmLoading(true);

    setTimeout(() => {
      setOpen(false);
      setConfirmLoading(false);
      setLocal(Local.REDIRECT_PATH, location.pathname);
      dispatch(remove());
      navigate("/login");
    }, 1000);
  };

  const handleCancel = () => {
    console.log("Clicked cancel button");
    setOpen(false);
  };

  useEffect(() => {
    setDataList(dataSource);
  }, []);

  const selectChange = (value: any, options: any) => {
    console.log(value, options, "---");
    changeDataList(value);
  };

  const changeDataList = useCallback((type: string) => {
    if (type) {
      const filterFlag = Number(type);
      const newData = dataSource.filter((item) => item.type === filterFlag);
      setDataList(newData);
    } else {
      setDataList(dataSource);
    }
  }, []);

  return (
    <>
      <div
        className="w-full page p-1"
        style={{ height: "100vh", overflow: "hidden" }}
      >
        <Layout>
          <Header style={{ background: "#fff", padding: " 0 20px" }}>
            <div className="w-full h-full flex items-center justify-between">
              <div className="font-bold">
                <h3>欢迎您的到来！</h3>
              </div>
              <div className="flex items-center justify-between">
                <div>筛选：</div>
                <ProSelect
                  style={{ width: "200px" }}
                  options={getSelectData(SHOP_TYPE)}
                  placeholder="请选择商品类型"
                  showSearch={true}
                  callback={selectChange}
                />
              </div>
              <div className="userInfo">
                <Avatar size={34} src={headerImg} />
                <div className="username">{userInfo?.username ?? "默认"}</div>
                <Tooltip title="退出登录">
                  <Popconfirm
                    placement={"rightBottom"}
                    title={"提示"}
                    description={"您确定要退出登录吗？"}
                    open={open}
                    onConfirm={handleOk}
                    okButtonProps={{ loading: confirmLoading }}
                    onCancel={handleCancel}
                  >
                    <LogoutOutlined
                      className="out_icon"
                      onClick={showPopconfirm}
                    />
                  </Popconfirm>
                </Tooltip>
              </div>
            </div>
          </Header>

          <Content
            style={{
              margin: "24px 0px",
              padding: 12,
              background: "#fff",
              height: "calc(100vh - 64px - 48px)", // 100vh(父容器高度) - Header高度(64px) - 上下margin(24px*2)
              overflowY: "scroll",
              scrollbarWidth: "none",
            }}
            className="site-layout-background"
          >
            {dataList.length === 0 ? (
              <Empty description={"暂无对应商品"} />
            ) : (
              <Row gutter={16}>
                {dataList.map((item, index) => {
                  return (
                    <Col span={8} key={index} className="mb-4">
                      <Card
                        hoverable
                        title={item.name}
                        extra={getTypeTag(item.type)}
                        actions={[
                          <p key={index}>
                            <Button
                              onClick={() => handleDetailModal(item)}
                              type="primary"
                            >
                              点击查看视频效果
                            </Button>
                          </p>,
                        ]}
                      >
                        <div className="card_content">
                          <img src={item.imgUrl} className="pic" />
                          <div className="description">
                            <div className="text">{item.desc}</div>
                            <div className="price">¥{item.price}</div>
                          </div>
                        </div>
                      </Card>
                    </Col>
                  );
                })}
              </Row>
            )}

            <FloatButton.BackTop
              visibilityHeight={50}
              target={() =>
                document.querySelector(".site-layout-background") as HTMLElement
              }
            />
          </Content>
        </Layout>
        <DetailModal modalProps={modalProps} onCancel={closeModal} />
      </div>
    </>
  );
}

export default ShopList;
